<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="lib/jq.js"></script>
    <script>

    </script>

    <script type="text/javascript">
        //子选择器
        //$('div > p') 选择所有div元素里面的子元素P
        // $(document).read(function () {
        //     //.css("border", "1px groove red");
        //     $('div').css(
        //         "color","red"
        //     );
        // })

    </script>
</head>
<body>
<!-- jquery 层级选择器-->


<!--<h2>test</h2><div>-->
    <!--<div>-->
        <!--div1-->
        <!--<p>dp1</p>-->
    <!--</div>-->
    <!--<div>-->
        <!--div2-->
        <!--<p>dp2</p>-->
        <!--<div id="inside_div">-->
            <!--idiv1-->
        <!--</div>-->
    <!--</div>-->
<!--</div>-->
<!--<div>-->
    <!--<div>-->
        <!--<article>-->
            <!--<p>ap1</p>-->
        <!--</article>-->
    <!--</div>-->
    <!--<div>-->
        <!--<article>-->
            <!--<p>ap2</p>-->
        <!--</article>-->
    <!--</div>-->
<!--</div>-->

<div>
    <p>11111</p>
    <p>11111</p>
    <ul>
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
        <li>List item 4</li>
    </ul>
    <!--<ol>-->
        <li>List item 1</li>
        <li>List item 2</li>
        <li>List item 3</li>
    <!--</ol>-->
    <article>
        <p>2222</p>
        <p>2222</p>

    </article>
</div>



<script type="text/javascript">

    //子选择器
    // $('div > p').css("color", "red");
    //
    // //后代选择器
    // $('div p').css("color", "green");
    // $('p').css('color','red');
    // $('#inside_div').css('color','blue');
    //邻居选择器(严格) 选择和自己相邻的同一个父元素的
    // $('li + p').css('color', 'red');

    //邻居选择器 选择和自己相邻的同一个父元素的
    // $('li ~ p').css('color', 'red');
    //
    // $('div > p').css('color',"red");
    // $('div p').css('color','green');

    var li = $('li:eq(2)').css({'color':'blue','border':"solid red"});



</script>



</body>
</html>